
<!-- 
 * svgIcon组件
 * @author: 
 * @since: 2022-04-02
 * index.vue
-->
<template>
  <svg :class="svgClass" v-bind="$attrs" :style="{ 'font-size': size, color: color }">
    <use :xlink:href="iconName" />
  </svg>
</template>

<script setup>
import { defineProps, computed } from "vue";

const props = defineProps({
  scriptUrl: {
    //iconfont上的symbol地址
    type: String,
    default: "//at.alicdn.com/t/font_1497803_itbf5madktl.js",
  },
  name: {
    //Symbol名字
    type: String,
    required: true,
  },
  color: {
    type: String,
    default: "",
  },
  size: {
    //图标大小
    type: [String, Number],
    default: "14px",
  },
});
const iconName = computed(() => `#icon-${props.name}`);
const svgClass = computed(() => {
  if (props.name) {
    return `svg-icon icon-${props.name}`;
  }
  return "svg-icon";
});

const getIconFont = () => {
  let iconfont = document.getElementById("iconfont");
  if (!iconfont) {
    const s = document.createElement("script");
    s.id = "iconfont";
    s.type = "text/JavaScript";
    s.src = props.scriptUrl;
    document.body.appendChild(s);
  }
};
getIconFont();
</script>

<style lang="scss" scoped>
.svg-icon {
  width: 1em;
  height: 1em;
  vertical-align: middle;
  fill: currentColor;
}
</style>